<template>
  <div>
    <AD v-show="$store.state.showAD"></AD>
    <div class="header">
      <router-link to="/city" tag="div" class="city">{{$store.state.city.name}}</router-link>
      <router-link to="/index/movie/hotshowing" tag="div" class="hotshowing">正在热映</router-link>
      <router-link class="comingsoon" tag="div" to="/index/movie/comingsoon">即将上映</router-link>
      <router-link class="search" tag="div" to="/search">搜索</router-link>
    </div>

      <keep-alive>
        <router-view></router-view>
      </keep-alive>
  </div>
</template>
<script>
import AD from "@/components/Ad"
export default {
  components: {
    AD
  }
}
</script>

<style lang="scss" scoped>
@import "assets/style/mixin.scss";

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
  font-size: 15px;
  height: 45px;
  line-height: 45px;
  @include border_1px(rgb(158, 157, 157));
  div {
    height: 100%;
  }
  .city {
    flex: 70;
  }
  .hotshowing,
  .comingsoon {
    flex: 80;
  }
  .search {
    flex: 70;
  }

  .router-link-exact-active {
    color: red;
    position: relative;
  }

  .router-link-exact-active::after {
    position: absolute;
    content: " ";
    bottom: 0px;
    left: 8px;
    right: 8px;
    background: red;
    height: 2px;
  }
}
</style>


